<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1-设置class类旋转效果/</title>
    <style>
		div {
			width: 150px;
			height: 150px;
			background-color: green;
			margin: 100px auto;
			transition: all 0.5s;
		}
		.cur {
			background-color: red;
			/* 360度旋转 */
			transform: rotate(360deg);
			/* transform:all .4s */
		}
    </style>
	<!-- 导入jquery库 -->
    <script src="js/jquery2.1.4.min.js"></script>
</head>

<body>
    <div></div>
	<script type="text/javascript">
		$(function(){
			console.log('页面加载完成...');
			$('div').click(function(){
				//alert(1);
				//对应原生JS里面 document.querySelector('div').className='cur';
				//添加class
				//$(this).addClass('cur');
				//移除class
				//$(this).removeClass('cur');
				$(this).toggleClass('cur');
			});
		});
	</script>
</body>

</html>